<template>
  <el-container style="height: 100vh">
    <el-header>
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
        active-text-color="black"
      >
        <el-menu-item
          v-for="item in accessibleNavigation"
          :key="item.path"
          :index="item.path"
        >
          {{ item.name }}
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<script>
import { computed } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default {
  setup() {
    const store = useStore();
    const router = useRouter();
    const accessibleNavigation = computed(
      () => store.getters.accessibleNavigation
    );

    const activeIndex = computed(() => router.currentRoute.value.path);

    const handleSelect = (index) => {
      router.push(index);
    };

    return {
      accessibleNavigation,
      activeIndex,
      handleSelect,
    };
  },
};
</script>

<style>
/* 这里可以添加一些自定义样式来美化导航栏 */
.el-header {
  background: #e0f2f1;
  color: #fff;
  line-height: 60px;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.el-menu {
  border: 0;
  background: #e0f2f1 !important;
}
.el-menu-item.is-active {
  background: #64aca8 !important;
}
.el-menu-item:hover {
  background: #64aca8 !important;
  color: black !important;
}
</style>